<template>
  <div class="common-layout">
    <el-container>
      <el-header :style="{ backgroundColor: color }">
        <el-row class="row-bg">
          <el-col :span="4">
            <div class="grid-content ep-bg-purple">
              <div class="img"></div>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content ep-bg-purple-light" style="float: right">
              <div style="display: flex; align-items: center; margin-top: 10px">
                <div>
                  <span>背景颜色</span>
                  <el-color-picker v-model="color" show-alpha />
                </div>
                <div>
                  <span>字体颜色</span>
                  <el-color-picker v-model="text_color" show-alpha />
                </div>
                <el-avatar
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                />
                <div>
                  <el-button @click="quit">退出</el-button>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            :active-text-color="text_color"
            :background-color="color"
            class="el-menu-vertical-demo"
            default-active="/menu/refuel"
            :text-color="text_color"
            router
          >
            <el-sub-menu
              v-for="item in menu"
              :key="item._id"
              :index="item.path"
            >
              <template #title>
                <el-icon><location /></el-icon>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group
                v-for="items in item.children"
                :key="items._id"
              >
                <el-menu-item :index="items.path">{{
                  items.name
                }}</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
let menu = ref([]);
const color = ref("rgba(84, 147, 112, 0.46)");
const text_color = ref("block");
onMounted(async () => {
  menu.value = JSON.parse(localStorage.getItem("data"))[0].pid;
});

let quit = () => {
  localStorage.clear();
  location.reload();
};
</script>

<style scoped>
.common-layout,
.el-container {
  height: 100%;
  width: 100%;
}
.common-layout {
  background: #eee;
}
.el-aside {
  background: white;
}
.el-main {
  margin-left: 20px;
  margin-top: 20px;
  background: white;
}
.el-menu {
  height: 100%;
}
.img {
  height: 60px;
  background: url("https://www.skyname.cn/upload/img/2020/07/27/5f1e7ccb1bc3e.png")
    no-repeat;
  background-size: contain;
  background-color: linear-gradient(
    to bottom,
    hsl(210, 55%, 58%) 10%,
    rgb(76, 224, 230) 60%
  );
}
</style>
